﻿<UserControl x:Class="NotesListBox.NotesListBoxControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:NotesListBox" 
    Background="Transparent"
    Height="Auto" Width="Auto">
    <UserControl.Resources>
        <SolidColorBrush x:Key="normalBrush"  Color="Orange"/>

        <!-- Gel Button style -->
        <Style TargetType="Button" x:Key="gelButton">
            <Setter Property="FrameworkElement.Width" Value="NaN"/>
            <Setter Property="FrameworkElement.MinWidth" Value="0"/>
            <Setter Property="FrameworkElement.Height" Value="NaN"/>
            <Setter Property="FrameworkElement.MinHeight" Value="30"/>
            <Setter Property="Control.Padding" Value="4,4,4,4"/>
            <Setter Property="FrameworkElement.VerticalAlignment" Value="Center"/>
            <Setter Property="TextElement.Foreground">
                <Setter.Value>
                    <SolidColorBrush>#FF7C4400</SolidColorBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="TextElement.FontSize" Value="12"/>
            <Setter Property="TextElement.FontWeight" Value="SemiBold"/>
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid Margin="0">
                            <Grid x:Name="gridGel"  Background="#00FFFFFF" Visibility="Hidden">
                                <Border BorderBrush="#FFFFFFFF" CornerRadius="6,6,6,6" 
                                    BorderThickness="3" Opacity="0.9" >
                                    <Border.BitmapEffect>
                                        <BlurBitmapEffect Radius="1" />
                                    </Border.BitmapEffect>
                                </Border>
                                <Border BorderBrush="#FFFFFFFF" CornerRadius="6,6,6,6" 
                                    BorderThickness="0,0,0.6,0.6" Opacity="0.7" />
                                <Border Margin="1,1,1,1" CornerRadius="6,6,6,6" 
                                    Name="background" Background="{TemplateBinding Tag}">
                                    <Grid Margin="1,1,1,1" ClipToBounds="True">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="*" />
                                            <RowDefinition Height="*" />
                                        </Grid.RowDefinitions>
                                        <Border CornerRadius="5" Margin="2" 
                                             Width="{TemplateBinding FrameworkElement.Width}" 
                                             Background="#FFFFFFFF" Opacity="0.2" 
                                             Grid.Row="0" Grid.RowSpan="1">
                                        </Border>
                                    </Grid>
                                </Border>
                                <Border Margin="1,1,1,1" BorderBrush="#FFFFFFFF" CornerRadius="6,6,6,6" 
                                    BorderThickness="5,5,0,0" Opacity="0.3">
                                    <Border.BitmapEffect>
                                        <BlurBitmapEffect Radius="1" />
                                    </Border.BitmapEffect>
                                </Border>
                                <Border Margin="1,1,1,1" BorderBrush="#FF000000" CornerRadius="6,6,6,6" 
                                    BorderThickness="0,0,0.6,0.6" Opacity="1">
                                    <Border.BitmapEffect>
                                        <BlurBitmapEffect Radius="1" />
                                    </Border.BitmapEffect>
                                </Border>
                                <ContentPresenter Margin="{TemplateBinding Control.Padding}" 
                                    HorizontalAlignment="Center" 
                                    VerticalAlignment="Center" 
                                    ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" 
                                    Content="{TemplateBinding ContentControl.Content}" />
                            </Grid>
                            <ContentPresenter x:Name="contOnly" Margin="{TemplateBinding Control.Padding}" 
                                    HorizontalAlignment="Center" VerticalAlignment="Center" 
                                    ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" 
                                    Content="{TemplateBinding ContentControl.Content}" 
                                    Opacity="0.4"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="gridGel" Property="Visibility" Value="Visible"/>
                                <Setter TargetName="contOnly" Property="Visibility" Value="Hidden"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>


        <local:ListIndexConverter x:Key="myListIndexConverter"/>
        <local:FormattingConverter x:Key="myFormattingConverter"/>

        <!-- ScrollBarPageButton -->
        <Style x:Key="ScrollBarPageButton" TargetType="{x:Type RepeatButton}">
            <Setter Property="SnapsToDevicePixels" Value="True"/>
            <Setter Property="OverridesDefaultStyle" Value="true"/>
            <Setter Property="IsTabStop" Value="false"/>
            <Setter Property="Focusable" Value="false"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type RepeatButton}">
                        <Border Background="Transparent" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!-- VerticalScrolScrollBarThumblBar -->
        <Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}">
            <Setter Property="SnapsToDevicePixels" Value="True"/>
            <Setter Property="OverridesDefaultStyle" Value="true"/>
            <Setter Property="IsTabStop" Value="false"/>
            <Setter Property="Focusable" Value="false"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Thumb}">
                        <Border 
                      CornerRadius="4" 
                      Background="{TemplateBinding Background}"
                      BorderBrush="{TemplateBinding BorderBrush}"
                      BorderThickness="1" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!-- VerticalScrollBar -->
        <ControlTemplate x:Key="VerticalScrollBar" TargetType="{x:Type ScrollBar}">
            <Grid Background="Transparent" >
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.00001*"/>
                </Grid.RowDefinitions>
                <Border
                      Grid.RowSpan="1"
                      CornerRadius="2" 
                      Background="Transparent" />
                <Track 
                      Name="PART_Track"
                      Grid.Row="1"
                      IsDirectionReversed="true">
                    <Track.DecreaseRepeatButton>
                        <RepeatButton 
                      Style="{StaticResource ScrollBarPageButton}"
                      Command="ScrollBar.PageUpCommand" />
                    </Track.DecreaseRepeatButton>
                    <Track.Thumb>
                        <Thumb 
                      Style="{StaticResource ScrollBarThumb}" 
                      Margin="3,0,3,0"  
                      Background="Orange"
                      BorderBrush="Orange" />
                    </Track.Thumb>
                    <Track.IncreaseRepeatButton>
                        <RepeatButton 
                      Style="{StaticResource ScrollBarPageButton}"
                      Command="ScrollBar.PageDownCommand" />
                    </Track.IncreaseRepeatButton>
                </Track>
            </Grid>
        </ControlTemplate>

        <!-- HorizontalScrollBar -->
        <ControlTemplate x:Key="HorizontalScrollBar" TargetType="{x:Type ScrollBar}">
            <Grid Background="Transparent" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.00001*"/>
                </Grid.ColumnDefinitions>
                <Border
                      Grid.ColumnSpan="1"
                      CornerRadius="2" 
                      Background="Transparent" />
                <Track 
                      Name="PART_Track"
                      Grid.Column="1"
                      IsDirectionReversed="False">
                    <Track.DecreaseRepeatButton>
                        <RepeatButton 
                      Style="{StaticResource ScrollBarPageButton}"
                      Command="ScrollBar.PageLeftCommand" />
                    </Track.DecreaseRepeatButton>
                    <Track.Thumb>
                        <Thumb 
                      Style="{StaticResource ScrollBarThumb}" 
                      Margin="0,3,0,3"  
                      Background="Orange"
                      BorderBrush="Orange" />
                    </Track.Thumb>
                    <Track.IncreaseRepeatButton>
                        <RepeatButton 
                      Style="{StaticResource ScrollBarPageButton}"
                      Command="ScrollBar.PageRightCommand" />
                    </Track.IncreaseRepeatButton>
                </Track>
            </Grid>
        </ControlTemplate>

        <!-- ScrollBar -->
        <Style x:Key="{x:Type ScrollBar}" TargetType="{x:Type ScrollBar}">
            <Setter Property="SnapsToDevicePixels" Value="True"/>
            <Setter Property="OverridesDefaultStyle" Value="true"/>
            <Style.Triggers>
                <Trigger Property="Orientation" Value="Horizontal">
                    <Setter Property="Width" Value="Auto"/>
                    <Setter Property="Height" Value="14" />
                    <Setter Property="Template" Value="{StaticResource HorizontalScrollBar}" />
                </Trigger>
                <Trigger Property="Orientation" Value="Vertical">
                    <Setter Property="Width" Value="14"/>
                    <Setter Property="Height" Value="Auto" />
                    <Setter Property="Template" Value="{StaticResource VerticalScrollBar}" />
                </Trigger>
            </Style.Triggers>
        </Style>


        <!-- ScrollViewer -->
        <ControlTemplate x:Key="ScrollViewerControlTemplate1" TargetType="{x:Type ScrollViewer}">
            <Grid x:Name="Grid" Background="{TemplateBinding Background}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Rectangle x:Name="Corner" Fill="Transparent" Grid.Column="1" Grid.Row="1"/>
                <ScrollContentPresenter Margin="{TemplateBinding Padding}" x:Name="PART_ScrollContentPresenter" Grid.Column="0" Grid.Row="0" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="False" CanVerticallyScroll="False"/>
                <ScrollBar Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Cursor="Arrow" x:Name="PART_VerticalScrollBar" Grid.Column="1" Grid.Row="0" ViewportSize="{TemplateBinding ViewportHeight}" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Value="{Binding Path=VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" AutomationProperties.AutomationId="VerticalScrollBar"/>
                <ScrollBar Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Cursor="Arrow" x:Name="PART_HorizontalScrollBar" Grid.Column="0" Grid.Row="1" Orientation="Horizontal" ViewportSize="{TemplateBinding ViewportWidth}" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Value="{Binding Path=HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" AutomationProperties.AutomationId="HorizontalScrollBar"/>
            </Grid>
        </ControlTemplate>







        <!-- Note DataTemplate -->
        <DataTemplate DataType="{x:Type local:Note}">
            <Grid  Background="Transparent">
                <Grid.RowDefinitions>
                    <RowDefinition Height="30"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>

                <StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal">
                    <Image Source="Images/pin.png" VerticalAlignment="Center" Width="18" Height="25"/>
                    <Label Content="{Binding Path=DateCreated, Mode=OneWay, 
                        Converter={StaticResource myFormattingConverter}, 
                        ConverterParameter='\{0:dd-MMM\}'}" 
                        FontSize="18" FontWeight="Bold" Foreground="DarkGoldenrod"
                        HorizontalAlignment="Right" VerticalAlignment="Center" />
                </StackPanel>

                    <ScrollViewer VerticalScrollBarVisibility="Auto" Height="60" Width="80"
                                  HorizontalScrollBarVisibility="Auto" Margin="5" 
                                  Grid.Row="1" Grid.Column="0" 
                                  Template="{StaticResource ScrollViewerControlTemplate1}">
                        <TextBox x:Name="txt" TextWrapping="Wrap" Text="{Binding Data, 
                            Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" 
                                 FontSize="10"
                                 AcceptsReturn="True" BorderBrush="Transparent"
                                 Background="Transparent"
                                 MaxLines="10" MaxLength="150"
                                 GotFocus="txt_GotFocus"
                                 BorderThickness="0"
                                 ToolTip="{Binding Data}"
                                 />

                    </ScrollViewer>

            </Grid>
        </DataTemplate>



        <!-- ListBoxItem -->
        <Style TargetType="ListBoxItem">
            <Setter Property="Canvas.Left" Value="0"/>
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>

            <Setter Property="Canvas.Top">
                <Setter.Value>
                    <Binding RelativeSource="{RelativeSource Self}" 
                        Converter="{StaticResource myListIndexConverter}"
                        ConverterParameter="Top"/>
                </Setter.Value>
            </Setter>
            <Setter Property="Canvas.ZIndex">
                <Setter.Value>
                    <Binding RelativeSource="{RelativeSource Self}" 
                        Converter="{StaticResource myListIndexConverter}"
                        ConverterParameter="ZIndex"/>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                        <Grid x:Name="gridItem" Background="DarkGoldenrod" Width="100" Height="100">
                            <Border Background="LemonChiffon" Margin="2">
                                <ContentPresenter 
                                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                                    HorizontalAlignment="Stretch" 
                                    VerticalAlignment="Stretch" 
                                    Margin="0"/>
                            </Border>
                            <Grid.LayoutTransform>
                                <RotateTransform CenterX="0.5" CenterY="0.5" 
                                    Angle="{Binding RelativeSource=
                                    {RelativeSource Mode=FindAncestor, 
                                    AncestorType={x:Type ListBoxItem}, AncestorLevel=1}, 
                                    Converter={StaticResource myListIndexConverter}, 
                                    ConverterParameter='Rotate'}"/>
                            </Grid.LayoutTransform>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="true">
                                <Setter TargetName="gridItem" Property="RenderTransform">
                                    <Setter.Value>
                                        <ScaleTransform CenterX="0.5" CenterY="0.5" 
                                                        ScaleX="1.5" ScaleY="1.5"/>
                                    </Setter.Value>
                                </Setter>
                                <Setter Property="Canvas.ZIndex" Value="99999"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>


        <!-- Need this default Style, to give us a scrollable ListBox. From this point
             onwards the Style will be created in code to reflect the correct ItemsPanel
             Height to match the number of items within the ListBox -->
        <Style TargetType="ListBox">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden"/>
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <Canvas x:Name="canv" Width="200" Height="200" 
                                Background="Transparent" Margin="5" />
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
        </Style>


        <!-- Add/Remove Buttons-->
        <ControlTemplate x:Key="buttonDropShadows" TargetType="{x:Type Button}">
            <Label x:Name="lbl" FontWeight="Bold" FontSize="30" 
                   Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}"/>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter TargetName="lbl" Property="BitmapEffect" >
                        <Setter.Value>
                            <DropShadowBitmapEffect ShadowDepth="6" 
                                Color="Orange" Softness="0.15" Noise="0"/>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>




    </UserControl.Resources>

  


    <Border BorderBrush="Black" CornerRadius="0" BorderThickness="0" Background="Transparent">
        <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0">
            <Grid.RowDefinitions>
                <RowDefinition x:Name="gridRowForHeader" Height="50"/>
                <RowDefinition x:Name="gridRowForList" Height="600" />
            </Grid.RowDefinitions>


            <Border BorderBrush="Orange" CornerRadius="0" BorderThickness="0,0,0,4" Background="Transparent">
                <StackPanel Orientation="Horizontal" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Center" Height="50">


                    <Button x:Name="btnAdd" Margin="2,2,2,2" Content="É" FontFamily="Wingdings 2" 
                            FontSize="20" Width="30" Height="30" Style="{StaticResource gelButton}"
                            Foreground="White" FontWeight="Bold" ToolTip="Add Note"
                            Tag="{StaticResource normalBrush}"
                            Click="btnAdd_Click"/>

                    <Button x:Name="btnRemove" Margin="2,2,2,2" Content="®" FontFamily="Wingdings 3" 
                            FontSize="20" Width="30" Height="30" Style="{StaticResource gelButton}"
                            Foreground="White" FontWeight="Bold" ToolTip="Remove Note"
                            Tag="{StaticResource normalBrush}"
                            Click="btnRemove_Click"/>


                    <Button x:Name="btnClose" Margin="25,2,2,2" Content="û" FontFamily="Wingdings" 
                            FontSize="25" Width="30" Height="30" Style="{StaticResource gelButton}"
                            Foreground="White" FontWeight="Bold" ToolTip="Close Notes Display"
                            Tag="{StaticResource normalBrush}"
                            Click="btnClose_Click"/>
                </StackPanel>
            </Border>

            <ScrollViewer Grid.Row="1" Grid.Column="0" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" Margin="0,5,0,0">
                <ListBox x:Name="lstNotes"  ItemContainerStyle="{x:Null}"
                     HorizontalAlignment="Right" VerticalAlignment="Center"/>
            </ScrollViewer>
        </Grid>
    </Border>
</UserControl>
